<template>
	<div>
		<div v-loading.fullscreen.lock="loading" class="courseHead" v-my-directive :data-title="title" data-description="学习技能、解决问题学习技能、解决问题学习技能、解决问题学习技能、解决问题学习技能、解决问题">
			<div class="left paddingtop10 columnnav Horizontalspacing minixgap fonfff minfont">
				<el-breadcrumb class="couresmb" separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item v-for="(item, index) in nav" :key="index" :to="{ path: '/course/' + item.alias }">{{ item.name }}</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div class="questionnav line">
				<div class="columnLayout interval">
					<span class="fonfff center QAfont couresmb">{{ current.name }}</span>
					<div class="Horizontalspacing interval fonfff">
						<div class="left Horizontalspacing minxgap">
							<div class="iconfont icon-duigouxiao fonfff minfont center couresmb"></div>
							<div class="couresmb">学习技能、解决问题学习技能、解决问题学习技能、解决问题学习技能、解决问题学习技能、解决问题</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 行内 -->
		<div class="coursenav">
			<div class="Genericpadding content">
				<div class="Horizontalspacing interval">
					<span class="center">分类：</span>
					<div class="aotowrap">
						<el-button plain text class="coreqzsolld" @click=";(curPage = 1), (Classificationtags = '全部'), getdata(current.alias)">{{ $t('message.ALL') }}</el-button>
						<el-button plain text class="coreqzsolld" v-for="(item, index) in subordinate" :key="index" @click=";(curPage = 1), (Classificationtags = item.name), getdata(item.alias)">{{ item.name }}</el-button>
					</div>
				</div>
				<div class="Horizontalspacing interval">
					<span class="center">价格：</span>
					<div class="aotowrap">
						<el-button plain text class="coreqzsolld" @click=";(Price = null), (pricetag = '全部'), getdata(alias)">{{ $t('message.ALL') }}</el-button>
						<el-button plain text class="coreqzsolld" @click=";(Price = 1), (pricetag = '收费'), getdata(alias)">收费</el-button>
						<el-button plain text class="coreqzsolld" @click=";(Price = 0), (pricetag = '免费'), getdata(alias)">免费</el-button>
					</div>
				</div>
				<div class="Horizontalspacing interval">
					<span class="center">条件：</span>
					<div class="aotowrap">
						<el-tag v-if="Classificationtags == '全部' && pricetag == '全部'" type="info">无</el-tag>
						<el-tag v-if="Classificationtags != '全部'" closable size="large" @close=";(Classificationtags = '全部'), getdata('')">分类: {{ Classificationtags }}</el-tag>
						<el-tag v-if="pricetag != '全部'" closable size="large" @close=";(Price = null), (pricetag = '全部'), getdata(alias)">价格: {{ pricetag }}</el-tag>
					</div>
				</div>
			</div>
		</div>
		<!-- 列表 -->
		<div class="coursenav">
			<div v-if="arclist.length == 0" class="dispaygrid">
				<div class="center">
					<el-alert class="center" title="未查询到任何课程" type="error" :closable="false" show-icon />
				</div>
			</div>
			<div v-else class="couracow">
				<el-card v-for="(item, index) in arclist" :key="index" :body-style="{ padding: '0px' }" class="coursecar">
					<router-link class="atop" :to="'/course/' + item.alias + '/' + item.id">
						<div :class="item.saleperiod ? 'TopRectangles' : ''">
							<div v-if="item.saleperiod" class="saleperiodabc"><span class="center">限时优惠</span></div>
							<el-image class="demo-image__error" :src="item.thumbnail">
								<template #error>
									<div class="image-slot">
										<el-icon><Picture /></el-icon>
									</div>
								</template>
							</el-image>
						</div>
					</router-link>

					<div style="padding: 14px" class="minfont ThinLineLayout coresxgap">
						<div class="Horizontalspacing minxgap">
							<el-tag class="left" effect="plain" size="small">{{ item.pidname }}</el-tag>
							<el-tooltip class="box-item" effect="light" :content="item.title" placement="top-start">
								<router-link class="center" :to="'/course/' + item.alias + '/' + item.id">
									<div class="coreqzsolld truncate-text">{{ item.title }}</div>
								</router-link>
							</el-tooltip>
						</div>
						<div class="custom-font-size" :style="!item.saleperiod ? { height: '24px !important' } : {}">
							<el-tag v-if="item.saleperiod" type="danger" effect="plain"><el-countdown format="[优惠剩余]D[天]HH[时]mm[分]ss[秒]" :value="parseInt(item.DiscountEnd)" :value-style="{ fontSize: '10px' }" /></el-tag>
						</div>
						<div class="Horizontalspacing space-around">
							<router-link class="left" :to="'/homepage/' + item.user.id">
								<div class="Horizontalspacing minxgap">
									<el-avatar class="center" :src="item.user.Avatar" :size="20">
										<el-icon>
											<Edit />
										</el-icon>
									</el-avatar>
									<div class="minfont grey center coreqzsolld truncate-texts">{{ item.user.nickname ? item.user.nickname : item.user.username }}</div>
								</div>
							</router-link>
							<div class="Horizontalspacing minxgap coreplice">
								<span class="center">{{ item.saleperiod ? (item.discount > 0 ? '$' + item.discount : '免费') : item.Price > 0 ? '$' + item.Price : '免费' }}</span>
								<el-text v-if="item.saleperiod" tag="del">原价:{{ item.Price }}</el-text>
							</div>
							<router-link :to="'/course/' + item.alias + '/' + item.id"><el-button type="danger" size="small">学习</el-button></router-link>
						</div>
					</div>
				</el-card>
			</div>
			<div class="dispaygrid">
				<el-pagination background class="center" :hide-on-single-page="value" @current-change="page" :current-page="curPage" :page-size="pagesize" layout="prev, pager, next" :total="total"> </el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
	import router from '../router' // 导入Vue Router
	import left from './../components/left'
	import { dataRequest as api } from '@/api/api'
	export default {
		name: 'name',
		components: {
			// 组件
			left,
		},

		data() {
			return {
				title: '所有课程',
				comn: this.$route.params.coureid,
				arclist: [],
				nav: [],
				current: [],
				Price: null,
				alias: '',
				subordinate: [],
				loading: true,
				Classificationtags: '全部',
				pricetag: '全部',

				qzsolldav: `qzsolldav`,
				tesorting: 0,
				order: false,

				//返回值
				value: true,
				pagesize: 20, //每页显示数量
				curPage: 1, // 当前页数
				total: 0, // 一共几条数据
				offset: 'DESC',
				// 默认按照时间
				tosort: 'time',
			}
		},
		watch: {
			'$route.params.coureid': function (newVal, oldVal) {
				// 当coureid参数发生变化时触发
				this.comn = newVal // 更新comn的值
				this.get() // 重新获取数据
			},
		},
		methods: {
			handleClose(tag) {
				this.getdata('')
			},
			// 获取数据
			async get() {
				this.loading = true
				console.log('comn', this.comn)
				let comn = await api(['Courselevel', this.comn])
				if (comn.code == 200) {
					if (comn.data['nav'][0]) {
						comn.data['nav'].unshift({ id: '0', name: '全部课程', alias: '', pid: '0', level: '0' })
					} else {
						comn.data['nav'] = [{ id: '0', name: '全部课程', alias: '', pid: '0', level: '0' }]
					}

					this.nav = comn.data['nav']
					console.log(this.nav)
					this.subordinate = comn.data['Classification']
					this.current = this.nav[this.nav.length - 1]
				}
				this.getdata(this.comn)
			},

			async getdata(alias) {
				this.loading = true
				this.alias = alias
				let array = await api(['Coursepagination', { perPage: this.pagesize, page: this.curPage, offset: this.offset, tosort: this.tosort, alias: this.alias, Price: this.Price }])
				console.log(array)
				if (array.code == 200) {
					this.total = array.massage / 1
					this.arclist = array.data
					let arr = []
					for (let i = 0; i < this.arclist.length; i++) {
						arr.push(this.arclist[i].id)
					}
					this.PageView(arr)
					console.log(arr)
				} else if (array.code == 404) {
					this.total = 0
					this.arclist = []
				}
				this.loading = false
			},
			// 分页
			async page(ele = 1) {
				window.scrollTo({ behavior: 'instant', top: 400 })
				this.curPage = ele
				this.getdata(this.alias)
			},
			// 浏览量
			PageView(ele) {
				api(['corebrowsing', ele])
			},
		},

		mounted() {
			// 生命周期:
			this.get()
		},
		updated() {
			// this.loading = false
		},
	}
</script>
<style scoped>
	.coresxgap {
		gap: 10px;
	}
	.coursecar {
		width: 283px;
	}
	.couracow {
		width: 1200px;
		display: flex;
		flex-wrap: wrap;

		gap: 22.6px;
	}
	.courseHead {
		width: 100%;
		min-width: 1200px;
		height: 300px;
		display: block;
		position: relative;
		background: url(../../src/assets/img/coure.jpg) center no-repeat;
		position: relative;
		overflow: hidden; /* 可以裁剪伪元素溢出的部分 */
	}

	.courseHead::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5); /* 设置蒙版颜色和透明度 */
		z-index: 1; /* 确保蒙版在图片之上 */
	}
	.couresmb {
		z-index: 2;
	}
	.coursenav {
		width: 1200px;
		padding-top: 20px;
		margin: auto;
	}

	.el-image {
		width: 283px;
		height: 283px;
	}
	.demo-image__error .el-image {
		padding: 0 5px;
		width: 100%;
		height: 100%;
	}

	.demo-image__error .image-slot {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: var(--el-fill-color-light);
		color: var(--el-text-color-secondary);
		font-size: 30px;
	}
	.demo-image__error .image-slot .el-icon {
		font-size: 30px;
	}
	.courepage {
		margin: auto;
	}
	.coreqzsolld:hover {
		color: var(--primary-color);
	}
	.saleperiodabc {
		position: absolute;
		display: grid;
		font-size: 16px;
		top: 0px;
		height: 24px;
		width: 65px;
		border-bottom-right-radius: 4px;
		background: #f56c6c; /* 使用 rgba 表示法，最后一个值 0.5 表示透明度，取值范围为 0 到 1 */
		z-index: 98;
	}
	.saleperiodabc span {
		font-weight: 550;
		font-size: 10px;
		color: rgb(255, 255, 255);
	}
	.atop {
		height: 0px !important;
		font-size: 0px;
	}
	.coreplice {
		font-weight: bold;
		font-size: 12px;
		color: #ff485e !important;
	}
	.minfont {
		font-size: 12px;
	}
	.truncate-text {
		width: 187px !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis; /* Webkit浏览器前缀 */
	}
	.truncate-texts {
		width: 50px !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis; /* Webkit浏览器前缀 */
	}
</style>
<style>
	.custom-font-size .el-statistic__content {
		width: 100%;
		font-weight: inherit; /* 清除字体粗细 */
		font-size: inherit; /* 清除字体大小 */
		color: inherit;
	}
	.coreplice .el-text {
		font-weight: 400 !important;
		font-size: 12px;
	}
</style>
<style scoped>
	@media screen and (max-width: 860px) {
		.courseHead {
			width: 100vw;
			min-width: 100vw;
			height: 1.22rem;
		}
		.coursenav {
			width: 100vw;
			padding-top: 0.2rem;
		}
		.coursecar {
			width: 1.8rem;
		}
		.el-image {
			width: 1.8rem;
			height: 1.8rem;
		}
		.truncate-text {
			width: 1.4rem !important;
		}
		.couracow {
			width: 100vw;
			gap: 0.15rem;
			/* justify-content: space-between; */
		}
		.coresxgap {
			gap: 0.05rem;
		}
		.questionnav {
			height: 1.22rem !important;
		}
		.QAfont {
			font-size: 0.25rem;
		}
	}
</style>
